<template>
  <div class="content-index">
    <home-head-nav />
    <home-swiper />
    <parcel-content title="热门房源">
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="没有热门房源"
        slot="houseItem"
        v-if="hotHouseList.length == 0"
      />
      <house-item
        @todetail="todetail(item.id)"
        slot="houseItem"
        v-for="item of hotHouseList"
        :key="item.id"
        :houseItem="item"
        :imgPath="staticpath+item.images[0].path"
        v-else
      >
        <span slot="title" class="houseItemtitle-box">{{item.region}}</span>
      </house-item>
    </parcel-content>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <parcel-content title="附近房源">
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="附近没有房源"
          slot="houseItem"
          v-if="generealHouseList.length == 0"
        />
        <house-item
          @todetail="todetail(item.id)"
          slot="houseItem"
          v-for="item of generealHouseList"
          :houseItem="item"
          :key="item.id"
          :imgPath="staticpath+item.images[0].path"
        >
          <span slot="title" class="houseItemtitle-box">{{item.region}}</span>
        </house-item>
      </parcel-content>
    </van-list>
    <tab-bar />
  </div>
</template>

<script>
import TabBar from "components/common/tabbar/TabBar";
import ParcelContent from "components/conten/parcelcontent/ParcelContent";

import HomeHeadNav from "./childcomps/HomeHeadNav";
import HomeSwiper from "./childcomps/HomeSwiper";
import HouseItem from "components/common/houseitem/HouseItem";

import {
  HomePageSwiper,
  getHotHouseList,
  getGenerealHouseList,
} from "network/homePage";

import { mapState } from "vuex";

export default {
  name: "homepage",
  components: {
    TabBar,
    HomeHeadNav,
    HomeSwiper,
    HouseItem,
    ParcelContent,
  },
  data() {
    return {
      swiperImg: [],
      hotHouseList: [],
      generealHouseList: [],
      staticpath: localStorage.getItem("staticpath"),
      pageNum: 0,
      pageSize: 3,
      loading: false,
      finished: false,
      size: 0,
    };
  },
  methods: {
    todetail(houseId) {
      this.$router.push({
        path: "/housedetail",
        query: {
          houseId,
        },
      });
    },
    onLoad() {
      console.log(this.loading);
      this.toGetGenerealHouseList();
    },
    toGetGenerealHouseList() {
      let city = this.city;
      this.pageNum = this.pageNum + 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      console.log(this.pageNum);
      console.log(city);
      getGenerealHouseList({ city, pageNum, pageSize }).then((res) => {
        console.log(res.data);
        if (res.code == 200) {
          this.size++;
          this.generealHouseList.push(...res.data.list);
          this.loading = false;
          if (this.size >= res.data.lastPage) {
            this.finished = true;
          }
        }
      });
    },
  },
  activated() {
    this.loading = false;
    this.finished = false;
    this.generealHouseList = [];
    this.pageNum = 0;
    this.size = 0;
    let city = this.city;
    getHotHouseList({ city }).then((res) => {
      console.log(res.data);
      this.hotHouseList = res.data;
    });
    this.toGetGenerealHouseList();
  },
  computed: {
    ...mapState({
      city: (state) => state.moduleHotCity.city,
    }),
  },
};
</script>

<style scoped>
.content-index {
  padding-top: 50px;
  padding-bottom: 60px;
}
.houseItemtitle-box {
  margin-left: 2px;
  font-size: 13px;
}
</style>